<!DOCTYPE html>
<html lang="UTF-8" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
	<link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="/css/font-awesome.min.css">
	<link rel="stylesheet" href="/css/theme.css">
	<style>
#footer {
    padding: 15px 0;
    background: #fff;
    border-top: 1px solid #ddd;
    text-align: center;
}
#topcontrol {
  color: #fff;
  z-index: 99;
  width: 30px;
  height: 30px;
  font-size: 20px;
  background: #222;
  position: relative;
  right: 14px !important;
  bottom: 11px !important;
  border-radius: 3px !important;
}

#topcontrol:after {
  /*top: -2px;*/
  left: 8.5px;
  content: "\f106";
  position: absolute;
  text-align: center;
  font-family: FontAwesome;
}

#topcontrol:hover {
    color: #fff;
    background: #18ba9b;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.label-type, .label-status, .label-order {
    background-color: #fff;
    color: #f60;
    padding : 5px;
    border: 1px #f60 solid;
}
#typeList  :not(:first-child) {
    margin-top:20px;
}
.label-txt {
    margin:10px 10px;
    border:1px solid #ddd;
    padding : 4px;
    font-size:14px;
}
.panel {
    border-radius:0;
}

.progress-bar-default {
    background-color: #ddd;
}
	</style>
  </head>
  <body>
 <div class="navbar-wrapper">
      <div class="container">
          <div th:replace="~{include::#navbartop}"></div>
      </div>
    </div>

    <div class="container theme-showcase" role="main">

        <div class="container">
            <div class="row clearfix">
                <div class="col-md-12 column">
                    <nav class="navbar navbar-default" role="navigation">
                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                            <ul class="nav navbar-nav">
                                <li>
                                    <a rel="nofollow" href="index.html"><i class="glyphicon glyphicon-home"></i> 众筹首页</a>
                                </li>
                                <li >
                                    <a rel="nofollow" href="projects.html"><i class="glyphicon glyphicon-th-large"></i> 项目总览</a>
                                </li>
                                <li class="active">
                                    <a rel="nofollow" href="javascript:;"><i class="glyphicon glyphicon-edit"></i> 发起项目</a>
                                </li>
                                <li>
                                    <a rel="nofollow" href="minecrowdfunding.html"><i class="glyphicon glyphicon-user"></i> 我的众筹</a>
                                </li>
                            </ul>
                        </div>
                    </nav>
                </div>
            </div>
        </div>
        
        
        <div class="container">
            <div class="row clearfix">
                <div class="col-md-12 column">
                    <div class="panel panel-default" >
                        <div class="panel-heading" style="text-align:center;">
                            <div class="container-fluid">
                                <div class="row clearfix">
                                    <div class="col-md-3 column">
                                        <div class="progress" style="height:50px;border-radius:0;    position: absolute;width: 75%;right:49px;">
                                          <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 100%;height:50px;">
                                            <div style="font-size:16px;margin-top:15px;">1. 项目及发起人信息</div>
                                          </div>
                                        </div>
                                        <div style="right: 0;border:10px solid #ddd;border-left-color: #88b7d5;border-width: 25px;position: absolute;
                                             border-left-color: rgba(92, 184, 92, 1);
                                             border-top-color: rgba(92, 184, 92, 0);
                                             border-bottom-color: rgba(92, 184, 92, 0);
                                             border-right-color: rgba(92, 184, 92, 0);
                                        ">
                                        </div>
                                    </div>
                                    <div class="col-md-3 column">
                                        <div class="progress" style="height:50px;border-radius:0;position: absolute;width: 75%;right:49px;">
                                          <div class="progress-bar progress-bar-default" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 100%;height:50px;">
                                            <div style="font-size:16px;margin-top:15px;">2. 回报设置</div>
                                          </div>
                                        </div>
                                        <div style="right: 0;border:10px solid #ddd;border-left-color: #88b7d5;border-width: 25px;position: absolute;
                                             border-left-color: rgba(221, 221, 221, 1);
                                             border-top-color: rgba(221, 221, 221, 0);
                                             border-bottom-color: rgba(221, 221, 221, 0);
                                             border-right-color: rgba(221, 221, 221, 0);
                                        ">
                                        </div>
                                    </div>
                                    <div class="col-md-3 column">
                                        <div class="progress" style="height:50px;border-radius:0;position: absolute;width: 75%;right:49px;">
                                          <div class="progress-bar progress-bar-default" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 100%;height:50px;">
                                            <div style="font-size:16px;margin-top:15px;">3. 确认信息</div>
                                          </div>
                                        </div>
                                        <div style="right: 0;border:10px solid #ddd;border-left-color: #88b7d5;border-width: 25px;position: absolute;
                                             border-left-color: rgba(221, 221, 221, 1);
                                             border-top-color: rgba(221, 221, 221, 0);
                                             border-bottom-color: rgba(221, 221, 221, 0);
                                             border-right-color: rgba(221, 221, 221, 0);
                                        ">
                                        </div>
                                    </div>
                                    <div class="col-md-3 column">
                                        <div class="progress" style="height:50px;border-radius:0;">
                                          <div class="progress-bar progress-bar-default" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 100%;height:50px;">
                                            <div style="font-size:16px;margin-top:15px;">4. 完成</div>
                                          </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="panel-body">
<div class="container-fluid">
	<div class="row clearfix">
		<div class="col-md-12 column">
			<blockquote style="border-left: 5px solid #f60;color:#f60;padding: 0 0 0 20px;">
				<b>
					项目及发起人信息
				</b>
			</blockquote>
		</div>
		<div class="col-md-12 column">
			<div class="page-header" style="    border-bottom-style: dashed;">
				<h3>
					项目信息
				</h3>
			</div>
            <form class="form-horizontal" id="projectInfomation">
              <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">分类信息</label>
                <div class="col-sm-10">
                    <label class="radio-inline" th:each="type:${typeList}">
                        <input type="checkbox" name="inlineRadioOptions" class="inlineRadio1" th:value="${type.id}">
                        [[${type.name}]]
                    </label>
                </div>
              </div>
              <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">标签</label>
                <div class="col-sm-10">
                    <ul style="list-style:none;padding-left:0;">
                        <li style="margin:10px 0" th:each="tag:${tagList}">[[${"["+tag.name+"]"}]]
                            <span class="label-txt tagItem" th:each="t:${tag.childrens}">
            [[${t.name}]]
            <input name="tagIdList" style="display: none;" type="checkbox" th:value="${t.id}"/>
        </span>
                        </li>
                    </ul>
                </div>
              </div>
              <div class="form-group">
                <label  class="col-sm-2 control-label">项目名称</label>
                <div class="col-sm-10">
                  <input type="text" name="projectName" class="form-control" >
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">一句话简介</label>
                <div class="col-sm-10">
                  <textarea class="form-control" name="projectDescription" rows="5"></textarea>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">筹资金额（元）</label>
                <div class="col-sm-10">
                  <input type="text" name="money" class="form-control" style="width:100px;" >
                  <label class="control-label">筹资金额不能低于100元,不能高于1000000000元</label>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">筹资天数（天）</label>
                <div class="col-sm-10">
                  <input type="text" name="day" class="form-control" style="width:100px;" >
                  <label class="control-label">一般10-90天，建议30天</label>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">项目头图</label>
                <div class="col-sm-10">
                  <button id="headerPictureBtn" type="button" class="btn btn-primary btn-lg active">上传图片</button>
                  <input type="file" style="display: none" id="headerPicture">
                    <label class="control-label">图片上无文字,支持jpg、jpeg、png、gif格式，大小不超过2M，建议尺寸：740*457px</label>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-2 control-label">项目详情</label>
                <div class="col-sm-10">
                    <button id="detailPictureBtn" type="button" class="btn btn-primary btn-lg active">上传图片</button>
                    <input multiple="multiple" id="detailPictureInput" type="file" name="headPicture" style="display: none;" />
                  <label class="control-label">支持jpg、jpeg、png、gif格式，大小不超过2M，建议尺寸：宽740px</label>
                </div>
              </div>
            </form>
		</div>
		<div class="col-md-12 column">
			<div class="page-header" style="    border-bottom-style: dashed;">
				<h3>
					发起人信息
				</h3>
			</div>
            <form class="form-horizontal" id="memberLauchInfo">
                <div class="form-group">
                    <label class="col-sm-2 control-label">自我介绍</label>
                    <div class="col-sm-10">
                        <input name="memberLauchInfoVO.descriptionSimple" th:value="${memberLaunchInfoPO==null}?'':${memberLaunchInfoPO.descriptionSimple}" type="text" class="form-control" placeholder="一句话自我介绍，不超过40字">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">详细自我介绍</label>
                    <div class="col-sm-10">
                        <textarea name="memberLauchInfoVO.descriptionDetail" th:text="${memberLaunchInfoPO==null}?'':${memberLaunchInfoPO.descriptionDetail}" class="form-control" rows="5" placeholder="向支持者详细介绍你自己或你的团队及项目背景，让支持者在最短时间内了解你，不超过160字"></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">联系电话</label>
                    <div class="col-sm-10">
                        <input name="memberLauchInfoVO.phoneNum"  th:value="${memberLaunchInfoPO==null}?'':${memberLaunchInfoPO.phoneNum}" type="text" class="form-control" placeholder="此信息不会显示在项目页面">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">客服电话</label>
                    <div class="col-sm-10">
                        <input name="memberLauchInfoVO.serviceNum"  th:value="${memberLaunchInfoPO==null}?'':${memberLaunchInfoPO.serviceNum}" type="text" class="form-control" placeholder="此信息显示在项目页面">
                    </div>
                </div>
            </form>
		</div>
	</div>
</div>
                        </div>
                        <div class="panel-footer" style="text-align:center;">
                            <button id="submitProject" type="button" class="btn  btn-warning btn-lg">下一步</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        

        <div class="container" style="margin-top:20px;">
            <div class="row clearfix">
                <div class="col-md-12 column">
                    <div id="footer">
                        <div class="footerNav">
                             <a rel="nofollow" href="http://www.layoutit.cn">关于我们</a> | <a rel="nofollow" href="http://www.layoutit.cn">服务条款</a> | <a rel="nofollow" href="http://www.layoutit.cn">免责声明</a> | <a rel="nofollow" href="http://www.layoutit.cn">网站地图</a> | <a rel="nofollow" href="http://www.layoutit.cn">联系我们</a>
                        </div>
                        <div class="copyRight">
                            Copyright ?2017-2017layoutit.cn 版权所有
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
      
    </div> <!-- /container -->
    <script src="/jquery/jquery-2.1.1.min.js"></script>
    <script src="/bootstrap/js/bootstrap.min.js"></script>
	<script src="/script/docs.min.js"></script>
    <script src="/script/back-to-top.js"></script>
	<script>
        $('#myTab a').click(function (e) {
            e.preventDefault()
            $(this).tab('show')
        })
        $(function () {

            $('#headerPictureBtn').click(function () {
                $('#headerPicture').click();
            });
            $('#headerPicture').change(function () {
                //发送ajax
                var file=this.files[0];
                var formData=new FormData();
                formData.append("headerPicture",file);
                $.ajax({
                    "url":"/project/manager/upload/head/picture",
                    "type":"post",
                    "data":formData,
                    "contentType":false,
                    "processData":false,
                    "success":function(responseResult){
                        if(responseResult.result=="SUCCESS"){
                            alert("上传成功！");
                        }else{
                            alert(responseResult.message);
                        }
                    }
                });
            });
        });
        $(function () {
            $("#detailPictureBtn").click(function(){
                $("#detailPictureInput").click();
            });
            $("#detailPictureInput").change(function(){
                // 获取用户选择的多个文件的数组
                var files = this.files;
                // 创建FormData对象
                var formData = new FormData();
                // 将上传的文件添加到formData中
                for(var i = 0; i < files.length; i++) {
                    var file = files[i];
                    formData.append("detailPicture", file);
                }

                // 执行上传
                $.ajax({
                    "url":"/project/manager/upload/detail/picture",
                    "type":"post",
                    "data":formData,
                    "contentType":false,
                    "processData":false,
                    "success":function(responseResult){
                        if(responseResult.result=="SUCCESS"){
                            alert("上传成功！");
                        }else{
                            alert(responseResult.message);
                        }
                    }
                });
            });
        });
        $(function () {
            $('.tagItem').click(function () {
                $(this).toggleClass('bg-success');
                if($(this).hasClass('bg-success')){
                    $(this).find('[type="checkbox"]').attr("checked",true);
                }else{
                    $(this).find('[type="checkbox"]').attr("checked",false);
                }
            });
        });

        $(function () {
            $('#submitProject').click(function () {
                $.ajax({
                    url : "/project/manager/save/project/information",
                    data: $("#projectInfomation,#memberLauchInfo").serialize(),
                    type: "post",
                    dataType: "json",
                    success: function(rs){
                        if(rs.result=="SUCCESS"){
                            window.location.href='/project/manager/to/project/return';
                        }else{
                            alert(rs.message);
                        }
                    }
                });
            });
        });

	</script>
  </body>
</html>